animateProperty

Type

command

Summary

Change the value of a property of an object in an animated way

Syntax

animateProperty <pControl>, <pPropertyName>, <pEndValue>, [<pDuration>], [<pEasing> | <pAnimationOptions>]

Description

Use the animateProperty command to animate a property value of an object. When pEndValue is a reference to another control, the animation will continuously update to match the target control's property value. This allows for dynamic "following" behavior where one control can track another control's property changes during the animation.

The library provides special transform properties that make it easy to move and scale objects:

• translateX/translateY: Move objects relative to their current position
• scaleX/scaleY: Scale width/height independently
• scaleXY: Scale both dimensions proportionally

These transform properties work similarly to CSS transforms and provide a convenient way to animate position and size changes.

Parameters

Name	Type	Description
pControl		The long id of a control.
pPropertyName		Name of the property you want to animate. The value of the passed property must be a number, a point, a color or a rectangle. The library also provides special transform properties: translateX: Moves the object horizontally relative to its current position translateY: Moves the object vertically relative to its current position scaleX: Scales the object's width relative to its current width scaleY: Scales the object's height relative to its current height scaleXY: Scales both width and height proportionally
pEndValue		Final value of the property to animate to. Can be either: A literal value (number|point|color|rectangle) A reference to another control (string). If a control reference is provided, the animation will dynamically track the value of pPropertyName for that control. This allows one control to "follow" another control's property changes during the animation.
pDuration		Duration of the animation in seconds
pEasing		The easing method to use for the animation. Supported to get the list of these methods use the easingMethods function.
pAnimationOptions		This parameter is an array with the following keys. easing: Defines the timing function of the animation. loop: The number of times to repeat the animation. This can be a numeric value equal to or greater than 1. It can also be true to repeat it infinitely. direction: Defines the direction of the animation. normal: The animation progress goes from 0 to 100% reverse: The animation progress goes from 100% to 0% alternate: The animation progress goes from 0% to 100% then goes back to 0%. autoPlay: Defines if the animation should automatically start or not. delay: Defines the delay in seconds before starting the animation. endDelay: Adds some extra time in seconds at the end of the animation.

Examples

set the label of me to 0
animateProperty the long id of me, "label", 100

# Animate to match another control's position
set the loc of button "Source" to 0,0
# If button "Target" moves during animation, button "Source" will track to its new position
animateProperty the long id of button "Source", "loc", \
		the long id of button "Target", 3, "inOutElastic"

# Animate using library-specific transform properties
set the translateX of button "Move" to 0
animateProperty the long id of button "Move", "translateX", 200, 2, "outBounce"

set the scaleXY of image "Grow" to 100
animateProperty the long id of image "Grow", "scaleXY", 200, 1.5, "inOutElastic"

set the angle of image 1 to 0
animateProperty the long id of image 1, "angle", 360, 5, "inElastic" 

set the top of me to 0
set the bottom of me to 0
animateProperty the long id of me, "rect", the rect of grc 1, 1, "outQuart"

set the backColor of me to empty
set the textSize of me to 12

animateProperty the long id of me, "backColor", any line of colorNames(), 1, "inExpo"
animateProperty the long id of me, "foreColor", any line of colorNames(), 1, "outQuint"
animateProperty the long id of me, "textSize", 32, 1, \
{ \
"easing": "inBack", \
"loop": "0", \
"direction": "normal", \
"autoPlay": "true", \
"delay": "0", \
"endDelay": "0" \
}

# Creating a batch of animations that start together
local tButton
put the long id of button "MyButton" into tButton

# Lock animations while setting up batch 
lockAnimations

# Set up animations - none will start yet
animateProperty tButton, "left", 200, 2, "inOutQuad"
animateProperty tButton, "top", 100, 2, "outBounce"
animateProperty tButton, "width", 150, 2, "inElastic" 
animateProperty tButton, "height", 80, 2, "outBack"

# Start all animations at once
unlockAnimations

Compatibility and Support

OS

mac

windows

linux

ios

android

Platforms

desktop

mobile

web